import CustomInput from '@/components/antd-comp/input/CustomInput'
import CustomSelect from '@/components/antd-comp/select/CustomSelect'
import { CommmonSmallJudgmentCommon, CommonSmallErrorTitle } from '@/pages/workflow/components/CommonSmallTemp'
import { variableSourceTypeOptions } from '@/pages/workflow/constants'
import { useSourceOptions } from '@/pages/workflow/hooks/use-source-options'
import { useEffect, useState } from 'react'

/* 意图识别 = 输入 */
export default function IntentInputCont({ info, editData }) {
  /* list */
  const [optionList, setOptionList] = useState([])
  const { options } = useSourceOptions(info)

  useEffect(() => {
    if (Array.isArray(info.inputList) && info.inputList.length > 0) {
      const newList = info.inputList.map(item => ({
        ...item,
        value: item.value ? item.value : (item.valuet ? item.valuet : undefined), //解决迭代器的时候value重置问题
        value_selector: item.value_selector ? item.value_selector : (item.valuet  ?  item.valuet.split(',') : undefined),
      }))

      setOptionList(newList)
    } else {
      setOptionList([])
    }
  }, [info.inputList])

  return (
    <div className="flexCol InputCont_case">
      <div className="flexRowStart columns-title--dGaYetSzjjUdXN_u9_8J">
        <div className="input-head" style={{ width: '140px' }}>
          参数名称
        </div>
        <div className="input-head w-[calc((92%-140px)*0.4)]">参数来源</div>
        <div className="input-head w-[calc((92%-140px)*0.4)]">参数值</div>
      </div>
      {/* options */}
      {optionList.map((item, i) => (
        <div key={i} className="flexRowStart flexRowJustBet InputCont_marTop">
          <div className="flexRowStart flexRowJustBet w-[92%]">
            {/* 参数名称 */}
            <div className="w-[140px]">
              <CustomInput disabled placeholder="输入参数名称" value={item.variable} />
            </div>
            {/* 变量类型 */}
            <div className="inputCont_end" style={{ width: 'calc(100% - 140px)' }}>
              <CustomSelect
                className="w-[40%]"
                onChange={e => {
                  const newList = optionList.map((obj, index) => {
                    if (index === i) {
                      return { ...obj, type: e, value: undefined, value_selector: undefined }
                    }
                    return obj
                  })
                  setOptionList(newList)
                  editData({
                    inputList: newList
                  })
                }}
                value={item.type}
                options={variableSourceTypeOptions}
                placeholder="参数来源"
              />
              {/* 类型引用组建 */}
              <CommmonSmallJudgmentCommon
                item={item}
                optionList={optionList}
                options={options}
                i={i}
                Change={newList => {
                  setOptionList(newList)
                  editData({
                    inputList: newList
                  })
                }}
              ></CommmonSmallJudgmentCommon>
            </div>
          </div>
        </div>
      ))}
      {/*  提示信息 */}
      <CommonSmallErrorTitle optionList={optionList} noneList={['value', 'variable', 'type']}></CommonSmallErrorTitle>
    </div>
  )
}
